<!DOCTYPE html>
<html >
    <head>
        <title>专车报名系统</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="format-detection" content="telephone=no">
        <meta name="description" content="北京规划院 移动办公 OA 自动化">
        <link rel="stylesheet" href="css/weui.min.css">
        <!-- bootstrap图标 -->
        <link rel="stylesheet" href="./css/font-awesome-4.7.0/css/font-awesome.min.css" />
        <link rel="stylesheet" type="text/css" href="css/rc.css"/>

        <style type="text/css">
            .agent-span {
                color: #5bc0de;
            }
            .operation-icon {
                text-align: center;
            }
            .my-flex {
                position: fixed;
                width: 98%;
                margin-left: 1%;
                bottom: 2px;
                z-index: 1000;
            }
            .my-weui-cell {
                padding: 6px 15px;
            }

            .base-info-div {
                height: calc(100vh - 368px);
                overflow: auto
            }

            .base-info-div-1 {
                height: calc(100vh - 140px);
                overflow: auto
            }
            .weui-cell__hd img {
                width: 28px;
                display: inline-block;
                vertical-align: middle;
            }
            .weui-btn {
                border-radius: 0;
            }

            #test-n1 {
                width: 100%;
                margin-top: 0px;
            }

            .weui-cells {
                width: 98%;
                margin: 0 auto;
                margin-bottom: 3px;
            }

            .weui-cell_select .weui-cell__bd:after {
                border-width: 0 2px 2px 0;
                border-color: #4D91F6;
                position: relative;
                top: -2px;
                position: absolute;
                top: 50%;
                right: unset;
                left: 70px;
                margin-top: -6px;
            }
        </style>
    </head>

    <body  style="height: 90%">
        <!-- 基本信息页面 -->
        <div class="page input js_show" >
            <div class="page__bd" id="base-info">
                <div>
                    <!-- 置顶部分 -->
                    <div class="weui-cells">
                        <div class="top-head">
                            <!-- 标题 -->
                            <div class="weui-cell" style="background-color: #5bc0de; display: none">
                                <div class="weui-cell__bd" style="text-align: center;">
                                    <span>专车报名系统</span>
                                </div>
                            </div>
                            <!-- 时间控件 -->
                            <div class="layui-inline" id="test-n1" style="display: none"></div>
                            <div class="weui-cell" id="departure-date-div">
                                <div class="weui-cell__hd">
                                    <label class="weui-label">
                                        <img src="images/carServer3.png">
                                        <!--<i class="fa fa-calendar" style="font-size: 17px; width: 17px"></i>-->
                                        &nbsp;发车日期：
                                    </label>
                                </div>
                                <div class="weui-cell__bd">
                                    <div class="placeholder">
                                        <span id="departure-date"></span>
                                    </div>
                                </div>
                            </div>
                            <!-- 上划将会折叠 -->
                            <div class="weui-cell weui-cell_select" style="padding-left: 0;border-bottom: 1px solid #ddd;">
                                <div class="weui-cell__hd">
                                    <label class="weui-label" style="border-left: 3px solid #4D91F6;padding-left: 5px;width: 3px;height: 25px;position: absolute;top: 10px;"></label>
                                    <select class="weui-select" name="select" id="selectOption">
                                        <option value="0">请选择时间段</option>
                                        <option value="1">上午</option>
                                        <option value="2">下午</option>
                                    </select>
                                </div>
                                <div class="weui-cell__bd">
                                    <div id="service-status-div" style="float: right;margin-right:5px ;">
                                        <span>[</span>
                                        <span id="service-status">进行中</span>
                                        <span>]</span>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <!-- 车辆信息展示部分 -->
                    <div class="weui-cells">
                        <!--style="height: calc(100vh - 369px); overflow: auto" 时间控件已藏前的-->
                        <!--style="height: calc(100vh - 136px); overflow: auto;" 时间控件已藏后的-->
                        <div id="base-info-div">
                            <!-- 用于分割 -->
                            <div class="weui-cell" style="display: none">
                                <div class="weui-cell__hd"><label class="weui-label"></label></div>
                                <div class="weui-cell__bd">
                                </div>
                            </div>

                            <div class="weui-cell my-weui-cell">
                                <div class="weui-cell__hd">
                                    <!-- 修改了weui.min.css de weui-label 的 width由105->125 -->
                                    <label class="weui-label">
                                        <!--<i class="fa fa-users" style="font-size: 17px; width: 17px"></i>-->
                                        <img src="images/carServer2.png">
                                        &nbsp;报名人数：
                                    </label>
                                </div>
                                <div class="weui-cell__bd">
                                    <span id="book-num"></span>
                                    <span>/</span>
                                    <span id="max-num"></span>
                                </div>
                            </div>
                            <div class="weui-cell my-weui-cell" >
                                <div class="weui-cell__hd">
                                    <label class="weui-label">
                                        <!--<i class="fa fa-clock-o" style="font-size: 17px; width: 17px"></i>-->
                                        <img src="images/carServer3.png"/>
                                        &nbsp;发车时间：
                                    </label>
                                </div>
                                <div class="weui-cell__bd">
                                    <span id="departure-date-time"></span>
                                </div>
                            </div>
                            <div class="weui-cell my-weui-cell" style="display: none">
                                <label class="weui-label">
                                    <!--<i class="fa fa-send-o" style="font-size: 17px; width: 17px"></i>-->
                                    <img src="images/carServer4.png"/>
                                    &nbsp;发车地点：
                                </label>
                                <div class="weui-cell__bd">
                                    <span id="departure-location"></span>
                                </div>
                            </div>
                            <div class="weui-cell my-weui-cell" style="display: none">
                                <label class="weui-label">
                                    <!--<i class="fa fa-map-marker" style="font-size: 17px; width: 17px"></i>-->
                                    <img src="images/carServer5.png"/>
                                    &nbsp;到达地点：
                                </label>
                                <div class="weui-cell__bd">
                                    <span id="arrive-location"></span>
                                </div>
                            </div>
                            <div class="weui-cell">
                                <div class="weui-cell__hd">
                                    <label class="weui-label">
                                        <!--<i class="fa fa-user-circle-o" style="font-size: 17px; width: 17px"></i>-->
                                        <img src="images/carServer6.png"/>
                                        &nbsp;司机信息：
                                    </label>
                                </div>
                            </div>
                            <div id="driverInfo">

                            </div>

                            <!-- 用于分割 -->
                            <div class="weui-cell" style="display: none">
                                <div class="weui-cell__hd"><label class="weui-label"></label></div>
                                <div class="weui-cell__bd">
                                </div>
                            </div>

                            <div class="weui-cell" style="background-color: #5bc0de">
                                <div class="weui-cell__bd" style="text-align: center;">
                                    <span>已报名人员名单</span>
                                </div>
                            </div>

                            <!-- 人员名单 -->
                            <div id="book-users"  class="book-users-div"></div>
                        </div>
                    </div>
                    <!-- *** -->
                </div>

                <!-- 按钮列表 -->
                <!-- 系统管理 和 我要报名 按钮 style="display: none;" -->
                <div id="manage" >
                    <div class="weui-flex my-flex" id="one-manage">
                        <!--<div class="weui-flex__item"  style="margin-right:30px;">-->
                        <div class="weui-flex__item">
                            <a href="javascript:;" class="weui-btn weui-btn_warn" style="background-color: #1B9AF7; color: #FDFDFD;"  id="system-manage">系统管理</a>
                        </div>
                        <div class="weui-flex__item">
                            <a href="javascript:;" class="weui-btn weui-btn_primary" style="background-color: #f3ab26;  color: #FDFDFD;"  id="my-book">我要报名</a>
                        </div>
                    </div>
                    <div class="weui-flex my-flex" style="display: none;" id="tow-manage">
                        <!--<div class="weui-flex__item"  style="margin-right:30px;">-->
                        <div class="weui-flex__item">
                            <a href="javascript:;" class="weui-btn weui-btn_warn" style="background-color: #1B9AF7; color: #FDFDFD"  id="system-manage2">系统管理</a>
                        </div>
                        <div class="weui-flex__item">
                            <a href="javascript:;" class="weui-btn weui-btn_primary" style="background-color: #f3ab26;  color: #FDFDFD"  id="edit-or-cancel-manage">编辑/取消报名</a>
                        </div>
                    </div>
                    <div class="weui-flex my-flex" style="display: none;" id="three-manage">
                        <!--<div class="weui-flex__item"  style="margin-right:30px;">-->
                        <div class="weui-flex__item">
                            <a href="javascript:;" class="weui-btn weui-btn_warn" style="background-color: #1B9AF7; color: #FDFDFD"  id="system-manage3">系统管理</a>
                        </div>
                        <div class="weui-flex__item">
                            <a href="javascript:;" class="weui-btn weui-btn_primary" style="background-color: #f3ab26;  color: #FDFDFD"  id="add-manage">点击评价本次服务</a>
                        </div>
                    </div>
                    <div class="weui-flex my-flex" style="display: none;" id="four-manage">
                        <!--<div class="weui-flex__item"  style="margin-right:30px;">-->
                        <div class="weui-flex__item">
                            <a href="javascript:;" class="weui-btn weui-btn_warn" style="background-color: #1B9AF7; color: #FDFDFD"  id="system-manage4">系统管理</a>
                        </div>
                        <div class="weui-flex__item">
                            <a href="javascript:;" class="weui-btn weui-btn_primary" style="background-color: #f3ab26;  color: #FDFDFD"  id="look-over-manage">点击查看服务评价</a>
                        </div>
                    </div>
                </div>
                <!-- 系统管理 和 我要报名 按钮 -->
                <!-- *** -->

                <!-- 普通用户操作按钮 -->
                <div id="user" style="display: none;">
                    <div class="weui-flex my-flex"  id="one-user">
                        <div class="weui-flex__item">
                            <a href="javascript:;" class="weui-btn weui-btn_primary" style="background-color: #f3ab26;  color: #0D0D0D"  id="book-user">我要报名</a>
                        </div>
                    </div>

                    <div class="weui-flex my-flex" style="display: none;" id="tow-user">
                        <div class="weui-flex__item">
                            <a href="javascript:;" class="weui-btn weui-btn_primary" style="background-color: #f3ab26;  color: #0D0D0D"  id="edit-or-cancel">编辑/取消报名</a>
                        </div>
                    </div>

                    <div class="weui-flex my-flex" style="display: none;" id="three-user">
                        <div class="weui-flex__item">
                            <a href="javascript:;" class="weui-btn weui-btn_primary" style="background-color: #f3ab26;  color: #0D0D0D"  id="add">点击评价本次服务</a>
                        </div>
                    </div>

                    <div class="weui-flex my-flex" style="display: none;" id="four-user">
                        <div class="weui-flex__item">
                            <a href="javascript:;" class="weui-btn weui-btn_primary" style="background-color: #f3ab26;  color: #0D0D0D"  id="look-over">点击查看服务评价</a>
                        </div>
                    </div>
                </div>
                <!-- 普通用户操作按钮 -->
                <!-- *** -->

                <!-- 点击“系统管理”按钮后的弹出的div style="background-color: #e0e0e0;display: none;height: 20%; z-index:1001"-->
                <div class="my-flex" id="manage-div" style="background-color: #f2f2f2;display: none;height: 170px; z-index:1001">
                    <div class="weui-flex" style="margin-top: 30px">
                        <div class="weui-flex__item" id="edit">
                            <div class="placeholder operation-icon">
                                <!--<i class="fa fa-edit"></i>-->
                                <img src="images/edit_01.png">
                                <p style="font-size: 15px">编辑信息</p>
                            </div>
                        </div>
                        <div class="weui-flex__item" id="cancel-service">
                            <div class="placeholder operation-icon">
                                <!--<i class="fa fa-power-off"></i>-->
                                <img src="images/cancel_01.png">
                                <p style="font-size: 15px">取消服务</p>
                            </div>
                        </div>
                        <div class="weui-flex__item" id="export-data">
                            <div class="placeholder operation-icon">
                                <!--<i class="fa fa-download"></i>-->
                                <img src="images/export_03.png">
                                <p style="font-size: 15px">导出数据</p>
                            </div>
                        </div>
                        <div class="weui-flex__item" id="send-message">
                            <div class="placeholder operation-icon">
                                <!--<i class="fa fa-bullhorn"></i>-->
                                <img src="images/message_02.png">
                                <p style="font-size: 15px">发送通知</p>
                            </div>
                        </div>
                    </div>

                    <!--style="margin:0 auto; width: 85%; margin-top: 5%; margin-bottom: 5%;"-->
                    <div class="weui-flex my-flex" style="width: 90%;bottom: 10px; right: 5%; left: 5%">
                        <div class="weui-flex__item">
                            <a href="javascript:;" class="weui-btn weui-btn_warn" style="background-color: #FDFDFD; color: #0D0D0D; box-shadow:0 0 1px #000 inset; font-size: 15px"  id="cancel">取消</a>
                        </div>
                    </div>
                </div>
                <!-- *** -->

                <!-- 下面都是操作提示框 -->
                <!-- toast-->
                <div id="toast" style="opacity: 1; display: none;">
                    <div class="weui-mask_transparent"></div>
                    <div class="weui-toast">
                        <i class="weui-icon-success-no-circle weui-icon_toast"></i>
                        <p class="weui-toast__content"></p>
                    </div>
                </div>

                <!--loadingToast-->
                <div id="loadingToast" style="opacity: 1; display: none;">
                    <div class="weui-mask_transparent"></div>
                    <div class="weui-toast">
                        <i class="weui-loading weui-icon_toast"></i>
                        <p class="weui-toast__content"></p>
                    </div>
                </div>

                <!-- iosDialog2 -->
                <div class="js_dialog" id="dialog" style=" display: none;">
                    <div class="weui-mask"></div>
                    <div class="weui-dialog">
                        <div class="weui-dialog__hd"><strong class="weui-dialog__title" id="strong"></strong></div>
                        <div class="weui-dialog__ft">
                            <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary" id="iknow">知道了</a>
                        </div>
                    </div>
                </div>

                <!-- iosDialog2 -->
                <div class="js_dialog" id="dialog1" style=" display: none;">
                    <div class="weui-mask"></div>
                    <div class="weui-dialog">
                        <div class="weui-dialog__hd"><strong class="weui-dialog__title" id="strong1"></strong></div>
                        <div class="weui-dialog__ft">
                            <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary" id="iknow1">知道了</a>
                        </div>
                    </div>
                </div>

                <!-- iosDialog -->
                <div class="js_dialog" id="cancelDialog" style="display:none">
                    <div class="weui-mask"></div>
                    <div class="weui-dialog">
                        <div class="weui-dialog__hd"><strong class="weui-dialog__title">服务取消后不可恢复，确定取消这次服务码？</strong></div>
                        <div class="weui-dialog__ft">
                            <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default" id="cancelNo">取消</a>
                            <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary" id="cancelYes">确定</a>
                        </div>
                    </div>
                </div>


            </div>

            <!-- 遮罩层 -->
            <div id="mask" style="display:none; position: fixed; z-index: 1000; background-color: rgba(0,0,0,.5);top:0px; left:0px; right:0px; bottom:0px;width: 100%;height: 100%"></div>
        </div>
        <script src="./js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
        <script src="./js/jquery.touchSwipe.js" type="text/javascript" charset="UTF-8"></script>
        <script src="./js/jquery-weui.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="./js/laydate/laydate.js"></script>
        <script src="./js/my-js/index.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            // 滚动条
            $("#base-info").scroll(function(){
                $(this).scrollTop();
            });
        </script>
    </body>

</html>